// 导入
require('../css/commCss/normalize.css')
require('../css/commCss/reset.css')
require('../css/commCss/property.css')
require('../css/commCss/basic.less')
require('../font/iconfont.css')
require('../css/me-modify.less')

// 引入weui
require('weui')
const weui = require('weui.js')

// 导入axios
const axios = require('axios')

document.addEventListener('DOMContentLoaded', function () {

    // 获取元素
    const imgUrl = document.querySelector('#imgUrl');
    const img = document.querySelector('#img')
    const city = document.querySelector('#city')


    // 修改信息按钮
    const submitBtn = document.querySelector('#submitBtn')

    // 定义省份、城市保存数据  
    let proArr = [];
    let cityArr = [];

    // 返回上一级页面
    document.querySelector('#meReturn').addEventListener('click', function () {
        history.go(-1)
    })

    // 数据回填
    axios.get('http://139.9.177.51:8099/users/accountinfo', {
        params: {
            userId: localStorage.userId
        }
    }).then(function (res) {
        console.log(res.data);
        let data = res.data.data
        // 头像
        if (data.imgurl) {
            img.src = data.imgurl
        }

        // 昵称
        document.querySelector('#nickname').value = data.nickname
        // 性别
        if (data.gender) {
            document.querySelector('#sex').textContent = data.gender
        }
        // 生日
        if (data.birthday) {
            document.querySelector('#birthday').textContent = data.birthday.substr(0, 10)
        }
        // 所在城市
        if (data.address) {
            // data.address.split(',')
            // console.log(data.address.split(','));
            document.querySelector('#pro').textContent = data.address.split(',')[0]
            document.querySelector('#city').textContent = data.address.split(',')[1]
        }
        if (data.sign) {
            document.querySelector('#sign').value = data.sign
            document.querySelector('#signNum').textContent = document.querySelector('#sign').value.length
        }
    })

    // 性别
    document.querySelector('#sexPicker').addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            onConfirm: function (result) {
                // console.log(result[0]);
                document.querySelector('#sex').textContent = result[0].label
            },
            title: '请选择性别'
        });
    });
    // 获取省份数据
    axios.get('http://139.9.177.51:8099/address/province').then(function (res) {
        // console.log(res.data);
        let data = res.data.data
        proArr = data.map(function (v) {
            return {
                label: v.name,
                value: v.addressId
            }

        })
        // console.log(proArr);
    })


    // 省份
    document.querySelector('#proPicker').addEventListener('click', function () {
        weui.picker(proArr, {
            onConfirm: function (result) {
                // console.log(result[0].value);
                document.querySelector('#pro').textContent = result[0].label

                // 获取省包括的城市
                axios.get('http://139.9.177.51:8099/address/city/' + result[0].value).then(function (res) {
                    // console.log(res.data);
                    let data = res.data.data
                    // console.log(data);
                    cityArr = data.map(function (v) {
                        return {
                            label: v.name,
                            value: v.addressId
                        }

                    })
                    city.textContent = cityArr[0].label
                    // console.log(cityArr);
                })
            },
            title: '请选择省份'
        });
    });
    // 城市
    document.querySelector('#cityPicker').addEventListener('click', function () {
        weui.picker(cityArr, {
            onConfirm: function (result) {
                // console.log(result[0]);
                document.querySelector('#city').textContent = result[0].label
            },
            title: '请选择城市'
        });
    });
    // 生日
    document.querySelector('#birthdayPicker').addEventListener('click', function () {
        weui.datePicker({
            start: new Date().getFullYear() - 80,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                // console.log(result);
                // 补零函数
                function fillZreo(n) {
                    return n < 9 ? '0' + n : n
                }
                let str = [result[0].value, fillZreo(result[1].value), fillZreo(result[2].value)].join('-')
                // console.log(str);
                document.querySelector('#birthday').textContent = str

            },
            title: '请选择您的生日'
        });
    });

    // 上传图片
    imgUrl.addEventListener('change', function () {
        let file = this.files[0]
        let fd = new FormData()
        fd.append('imgurl', file);
        axios.post('http://139.9.177.51:8099/users/upload', fd).then(function (res) {
            console.log(res.data);
            if (res.data.status === 1) {
                weui.toast('头像格式不正确')
            } else {
                img.src = `http://139.9.177.51:8099${res.data.data}`
            }
        })
    })

    // 美化上传头像的方式
    document.querySelector('#img').addEventListener('click', function () {
        document.querySelector('#imgUrl').click()
    })


    // 渲染个性签名数据
    document.querySelector('#sign').addEventListener('input', function () {
        // console.log(this.value.length);
        document.querySelector('#signNum').textContent = this.value.length
    })

    // 提交信息
    submitBtn.addEventListener('click', function () {
        // 获取信息
        userCont = {
            imgurl: img.src,
            nickname: document.querySelector('#nickname').value,
            gender: document.querySelector('#sex').textContent,
            birthday: document.querySelector('#birthday').textContent,
            address: [document.querySelector('#pro').textContent, document.querySelector('#city').textContent],
            sign: document.querySelector('#sign').value,
            userId: localStorage.userId,

        }
        console.log(userCont);
        axios.post('http://139.9.177.51:8099/users/userEdit', userCont).then(function (res) {
            console.log(res.data);
            if (res.data.status === 0) {
                weui.toast('信息修改成功', {
                    callback() {
                        location.href = './me.html';
                    }
                })
            } else {
                weui.toast('修改错误')
            }
        })
    })
})